	//定义了一个工具对象
	const myutils={};
	
	//对象属性拷贝
	myutils.copyProps=function(oldObj){
		let newObj={};
		for(let prop in oldObj){//遍历对象的属性名称（键）
			newObj[prop]=oldObj[prop];
		}
		return newObj;
	}
	
	//打开修改窗口
	const openUpdateWin = function(emp){
		//然后通过调用这个方法给updemp赋值
		this.updemp=myutils.copyProps(emp);
		//特殊值特殊赋值
		this.updemp.date=emp.e_date_str;
		
		this.winUpdIdx = layer.open({
			  type: 1, 
			  area: ['700px', '540px'],
			  content: $('#win-upd')
			});
		
	};
	
	//执行修改
	const execUpd=function(){
		
		
		let loadIdx = layer.load();// 加载提示
		
		this.$axios.put('emp',this.updemp)
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);
					layer.close(vm.winUpdIdx);// 关闭增加窗口
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				console.log(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			});
		
	};

	//执行单删除
	const execDel=function(eid){
		
		//用户选择的情况下执行的   confirm为询问窗口
		layer.confirm('您确定要删除这条数据吗？', {icon: 3, title:'提示'}, function(index){
		
			let loadIdx = layer.load();// 加载提示
			
			this.$axios.delete(`emp/${eid}`)
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);					
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				console.log(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			});
		})
		
	};

	//执行多删除
	const execMultiDel=function(){
		
			let loadIdx = layer.load();// 加载提示
			
			this.$axios.delete('emp',{data:this.delIds})
			.then(function(resp){
				
				layer.close(loadIdx);
				
				let result = resp.data;
				if(result.success){
					vm.getPage(vm.page.curr);					
					layer.msg(result.message,{icon: 6,time: 1500}); 
				}else{
					layer.alert(result.message, {icon: 5});
				}
			})
			.catch((error)=>{
				alert(error);
				layer.close(loadIdx);
				layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
			})
	
	};



let vm=new Vue({
		el:"#app",//声明此方法在哪个位置进行渲染
		//数据的位置 网页上的数据都在这里声明
		data:{
			//查询条件
			query:{
				pageNumber:1,
				pageSize:5
			},
			//定义一个对象用来存放当前页面数据
			page:{},
			
			pageList:[3,5,8,10,20],
			
			//新增
			//定义一个对象用来存放添加当前页面的数据
			addemp:{},
			winAddIdx:null,
			
			//多删
			delIds:[],
			
			//全选控制
			allChecked:false,
			
			//修改
			updemp:{},
			winUpdIdx:null,
			
		},
		//网页上要执行的方法
		methods:{
			
			onPageSizeChange(){
				this.getPage(1);
			},
			
			//此方法是从数据库查询数据   这里参数都是上面声明过的
			getPage(pageNumber){
				
				this.query.pageNumber=pageNumber;
				//发送axios的get请求  请求位置为emp  
				this.$axios.get('emp', {
					//params为你要从网页上提交的数据
				    params: this.query
				  })
				  //成功后执行的函数
				  .then((response) => {
					 //这是axios请求返回数据的特点，返回来的就是一个对象 
				    this.page=response.data;
				  })
				  //失败后执行的函数
				  .catch(function (error) {
				    console.log(error);
				  });
			},
			
			
			//打开增加窗口
			openAddWin(){		
				this.addemp={};// 重置表单
					//使用layer弹窗插件弹出窗口
					this.winAddIdx = layer.open({
						//设置弹出来的窗口是什么样子的
						  type: 1, 
						  //设置弹出来的窗口大小
						  area: ['700px', '540px'],
						  //content可传入的值是灵活多变的，不仅可以传入普通的html内容，
						  //还可以指定DOM，更可以随着type的不同而不同
						  content: $('#win-add')
						});
			},	
			//执行增加
			execAdd(){
				
				let loadIdx = layer.load();// 加载提示
				
				this.$axios.post('emp',this.addemp)
					 .then((resp)=>{
						layer.close(loadIdx);
						//响应的是数据对象
						const result = resp.data;
						if(result.success){
							this.getPage(this.page.pgTotal+1);//刷新数据
							layer.close(this.winAddIdx);// 关闭增加窗口
							layer.msg(result.message,{icon: 6,time: 1500}); 
						}else{
							layer.alert(result.message, {icon: 5});
						}
					 })
					 .catch((error)=>{
						console.log(error);
						layer.close(loadIdx);
						layer.alert(`服务器错误。错误代码：${error.response.status}` , {icon: 5});// es6新特性：模版字符串
					 })				
			},
			//多删
			execMultiDel,
			//单删
			execDel,
			//打开修改窗口
			openUpdateWin,
			//执行修改
			execUpd,
			
			
			
			
			
			
		},
		
		
		
		//回调函数是网页加载成功后立马执行的代码
		mounted(){
			//然后在这里调用查询的方法并且给他传入参数1表示默认显示第一页内容
			this.getPage(1);
		},
		
		
	watch:{//侦听属性变换
			
			allChecked(newValue,oldValue){
				if(newValue){//如果新事件是被勾选的然后就给arr往进去添加值
					let arr =[];
					for(let emp of this.page.rows){
						arr.push(emp.id);
					}
					//然后把这个数组赋值给delIds中
					this.delIds=arr;
				}else{
					this.delIds=[];
				}
		
			},
		
	}
		
		
		
		
	})
	
	